Group#

1import { Button, Group, List, Navigation, NavigationStack, Script, Section, Text, VStack } from "scripting"
2
3function Example() {
4  const dimiss = Navigation.useDismiss()
5
6  return <NavigationStack>
7    <List
8      navigationTitle={"Group"}
9      navigationBarTitleDisplayMode={"inline"}
10      toolbar={{
11        cancellationAction: <Button
12          title={"Done"}
13          action={dimiss}
14        />
15      }}
16    >
17      <Section
18        footer={
19          <Text>Apply the headline font to all Text views</Text>
20        }
21      >
22        <Group
23          font={"headline"}
24        >
25          <Text>Scripting</Text>
26          <Text>TypeScript</Text>
27          <Text>TSX</Text>
28        </Group>
29      </Section>
30
31      <Section
32        footer={
33          <Text>Group some views as a view</Text>
34        }
35      >
36        <VStack>
37          <Group
38            foregroundStyle={"red"}
39          >
40            <Text>1</Text>
41            <Text>2</Text>
42            <Text>3</Text>
43            <Text>4</Text>
44            <Text>5</Text>
45            <Text>6</Text>
46            <Text>7</Text>
47          </Group>
48          <Text>8</Text>
49        </VStack>
50      </Section>
51    </List>
52  </NavigationStack>
53}
54
55async function run() {
56  await Navigation.present({
57    element: <Example />
58  })
59
60  Script.exit()
61}
62
63run()